<script lang="ts" setup>
import { onMounted, onUnmounted, ref, getCurrentInstance } from "vue"
import useDraw from "@/utils/useDraw"
const { proxy }: any = getCurrentInstance()
// * 适配处理
const { calcRate, windowDraw, unWindowDraw } = useDraw()
const gauge = ref(null)
const gaugeData = [
  {
    value: 20,
    name: "Perfect",
    title: {
      offsetCenter: ["0%", "-30%"]
    },
    detail: {
      valueAnimation: true,
      offsetCenter: ["0%", "-20%"]
    }
  },
  {
    value: 40,
    name: "Good",
    title: {
      offsetCenter: ["0%", "0%"]
    },
    detail: {
      valueAnimation: true,
      offsetCenter: ["0%", "10%"]
    }
  },
  {
    value: 60,
    name: "Commonly",
    title: {
      offsetCenter: ["0%", "30%"]
    },
    detail: {
      valueAnimation: true,
      offsetCenter: ["0%", "40%"]
    }
  }
]

/**绘制仪表盘 */

const myChartCross = ref<any>()
const crossOption = ref<any>()
const renderChartCross = () => {
  if (myChartCross.value == null) {
    const myDom = gauge.value
    myChartCross.value = proxy.$echarts.init(myDom)
  }

  crossOption.value = {
    title: [
      {
        text: "凯茂科技动态"
      }
    ],
    series: [
      {
        type: "gauge",
        startAngle: 90,
        endAngle: -270,
        pointer: {
          show: false
        },
        progress: {
          show: true,
          overlap: false,
          roundCap: true,
          clip: false,
          itemStyle: {
            borderWidth: 1,
            borderColor: "#464646"
          }
        },
        axisLine: {
          lineStyle: {
            width: 40
          }
        },
        splitLine: {
          show: false,
          distance: 0,
          length: 10
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: false,
          distance: 50
        },
        data: gaugeData,
        title: {
          fontSize: 14
        },
        detail: {
          width: 50,
          height: 14,
          fontSize: 14,
          color: "inherit",
          borderColor: "inherit",
          borderRadius: 20,
          borderWidth: 1,
          formatter: "{value}%"
        }
      }
    ]
  }
  setInterval(() => {
    gaugeData[0].value = +(Math.random() * 100).toFixed(2)
    gaugeData[1].value = +(Math.random() * 100).toFixed(2)
    gaugeData[2].value = +(Math.random() * 100).toFixed(2)
    myChartCross.value.setOption(crossOption.value, true) //每次刷新后重新显示图表
  }, 1500)
}

// 生命周期
onMounted(() => {
  windowDraw()
  calcRate()
  // console.log(bar.value)
  renderChartCross()
})

onUnmounted(() => {
  unWindowDraw()
})
</script>
<template>
  <div style="width: 500px; height: 500px">
    <!--仪表盘-->
    <div ref="gauge" id="gauge" />
  </div>
</template>
<style lang="scss" scoped>
#gauge {
  width: 500px;
  height: 100%;
}
</style>
